<template>
  <div>
    <Transition name="messagebox-fade">
      <!-- 遮罩层，visible控制其显示或隐藏 -->
      <div
        class="rl-message-box"
        v-show="state.visible"
        @click.self="handleClickModal"
      >
        <!-- MessageBox区域，居中显示在页面中 -->
        <div class="rl-message-box-wrapper">
          <!-- 顶部title区域 -->
          <div class="rl-message-box-title">
            <h1>{{ props.title }}</h1>
            <!-- 关闭弹窗图标 -->
            <span
              class="rl-message-box-close"
              @click="handleAction('close')"
            >
              <RlIcon icon="xmark"></RlIcon>
            </span>
          </div>
          <!-- content内容区域：props传递而来 -->
          <div class="rl-message-box-content">
            <p>{{ props.content }}</p>
          </div>
          <!-- 底部按钮区域 -->
          <div class="rl-message-box-btns">
            <!-- 确认按钮 -->
            <RlButton @click="handleAction('confirm')">{{ props.confirmBtnText }}</RlButton>
            <!-- 取消按钮 -->
            <RlButton 
              type="danger" 
              v-if="props.showCancelBtn" 
              @click="handleAction('cancel')"
            >
            {{ props.cancelBtnText }}</RlButton>
          </div>

        </div>

      </div>

    </Transition>

  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import RlIcon from '@/components/Icon/Icon.vue'
import RlButton from '@/components/Button/Button.vue'
import {type MessageBoxOptions, type ActionType } from './types';


defineOptions({
  name: 'RlMessageBox'
})
const state = reactive({
  visible: false,  //控制弹窗显示与隐藏
  type: ''         //记录用户操作类型
})
// 设置弹窗显示或隐藏
const setVisible = (isVisible: boolean) => {
  state.visible = isVisible
}
// 从外传递的props
const props = defineProps<MessageBoxOptions>();
// 点击遮罩层，关闭MessageBox框
const handleClickModal = ()=>{
  if(props.closeOnClickModal){

  }
}
// 关闭Message框
const closeModal = ()=>{
  // 如果弹窗已经关闭，则返回
  if(!state.visible) return
  // 如果visible为false,隐藏
  setVisible(false)
}
// 处理按钮点击事件
const handleAction = (type: ActionType) =>{
  // 记录用户操作的类型
  state.type = type
  // 关闭弹框
  closeModal()
}

defineExpose({
  setVisible,
  state
})

</script>